<template>
  <button @click="doNextPage">Next Page{{ totalPages }}</button>
  <button @click="refreshReport">刷新报表</button>
  <button @click="viewReport">打印预览报表</button>
  <button @click="doSilentPrint">静默打印测试</button>
  <div style="padding:5px">
  <label>宽度:</label>
  <input type="input" v-model="width">
  <label>高度:</label>
  <input type="input" v-model="height">
  <label>pageIndex:</label>
  <input type="input" v-model="pageIndex">
  <label>报表ID:</label>
  <input type="input" v-model="reportId">
  </div>
<BaskReportViewer :width="width" :height="height" :id="reportId" :pageIndex="pageIndex" :callback="getReportInfo" :baseUrl="baseUrl" :parameters="parameters" :linkCallback="linkCallback"></BaskReportViewer>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import './components/message/style.less';
import type { JSLink, ParameterLink, ReportConfig, ReportLink, WebLink } from './components/report/BaskReport';
import BaskReport from './components/report/BaskReport';
import BaskReportViewer from './components/report/BaskReportViewer.vue';
import { ReportInfo } from './components/report/hooks';

const baseUrl = ref("http://localhost:8080/baskserver-test")
const reportId = ref(1);
const width = ref(800);
const height = ref(400);
const pageIndex = ref(1);
const totalPages = ref(0);
let index = 1;
const parameters = reactive({
  "param1": 0,
  "param2": "参数2"
});
const refreshReport = () => {
  index++;
  parameters.param1 = index;
}
const viewReport = () => {
  const config: ReportConfig = {
    id: reportId.value,
    pageIndex: 2,
    baseUrl: baseUrl.value
  }
  BaskReport.doPrint(config);
}
const getReportInfo = (info: ReportInfo) => {
  const tools = info.tools;
  for (let tool of tools) {
    console.log('name:' + tool.name);
  }
  totalPages.value = info.totalPages;
}
const linkCallback = (linkInfo: any) => {
  console.log("链接类型:", linkInfo.type, "链接信息", linkInfo);
  switch (linkInfo.type) {
    case "js": {
      const link:JSLink = linkInfo as any;
      console.log(link.code);
      break;
    }
    case "report":{
      const link:ReportLink = linkInfo as any;
      console.log(link.code);
      break;
    }
    case "web":{
      const link:WebLink = linkInfo as any;
      console.log(link.url);
      break;
    }
    case "parameter":{
      const link:ParameterLink = linkInfo as any;
      console.log(link.target);
      break;
    }
  }
}
const doNextPage = () => {
  pageIndex.value++;
}
const doSilentPrint = () => {
  BaskReport.doSlientPrint({
    id: reportId.value,
    baseUrl: baseUrl.value
  });
}
</script>
<style lang="less" >
.ps {
  border: 1px solid;
}
</style>
<style lang="less" scoped></style>
